<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>发表说呗</title>
<link rel="stylesheet" href="${pageContext.request.contextPath }/resource/css/frozen.css">
<script src="${pageContext.request.contextPath }/resource/js/lib/zeptojs/zepto.min.js"></script>
<script src="${pageContext.request.contextPath }/resource/js/frozen.js"></script>
<script src="${pageContext.request.contextPath }/resource/js/template.js"></script>
</head>
<body>
	<div class="ui-form ui-border-t">
		<form action="${pageContext.request.contextPath }/subject/add" method="post">
			<input type="hidden" name="audioUrl">
			<div class="ui-form-item ui-form-item-order ui-border-b">
				<label>主题名称 (<font color="red">*</font>)</label> 
				<input type="text" placeholder="最多40个字符" name="title" maxlength="40"/>
				<a href="javascript:void(0);" class="ui-icon-close" id="del_title"> </a>
			</div>

			<div class="ui-form-item ui-form-item-order ui-border-b">
				<label>分类(<font color="red">*</font>)</label>
				<div class="ui-select">
					<select name="firstTypeId">
						<c:forEach items="${typeList}" var="t">
							<option value="${t.id }">${t.typeName }</option>
						</c:forEach>
					</select>
				</div>
			</div>
			<div class="ui-form-item ui-form-item-order ui-border-b">
				<label class="ui-border-r"> 收费(<font color="red">*</font>) </label> 
				<input type="text" placeholder="请输入金额" name="price" value="0"/> 
				<a href="javascript:void(0);" class="ui-icon-close" id="del_price"></a>
			</div>
			<div class="demo-item">
				<div class="ui-btn-wrap">
					<img src="${pageContext.request.contextPath }/resource/img/static.jpg" style="max-width: 200px;max-height: 200px;">
				</div>
				<div id="msg"></div>
				<div class="ui-btn-wrap">
					<div class="ui-btn-group ui-border-t">
						<button class="ui-btn-lg" type="button" id="startRecord">开始录制</button>
						<button class="ui-btn-lg" type="button" id="stopRecord">停止录制</button>
						<button class="ui-btn-lg" type="button" id="playVoice">播放</button>
						<button class="ui-btn-lg" type="button" id="pauseVoice">停止</button>
					</div>
				</div>
				
				<div class="demo-block">
					<div class="ui-footer ui-footer-stable ui-btn-group ui-border-t">
						<button class="ui-btn-lg" type="button" id="uploadVoice">上传</button>
						<button class="ui-btn-lg" type="button" id="reset_btn">重录</button>
					</div>
				</div>
			</div>

		</form>
	</div>
	<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script type="text/javascript">
		  var voice = {
		    localId: '',
		    serverId: ''
		  };
		$(function() {
			wx.config({
			    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			    appId: '${appId}', // 必填，公众号的唯一标识
			    timestamp: '${timestamp}', // 必填，生成签名的时间戳
			    nonceStr: '${nonceStr}', // 必填，生成签名的随机串
			    signature: '${signature}',// 必填，签名，见附录1
			    jsApiList: ['startRecord', 'stopRecord','onVoiceRecordEnd','playVoice','playVoice',
			               'stopVoice','stopVoice','uploadVoice','downloadVoice','chooseImage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
			});
			
			wx.ready(function(){
				wx.checkJsApi({
				    jsApiList: ['startRecord', 'stopRecord','onVoiceRecordEnd','playVoice','playVoice',
					            'stopVoice','stopVoice','uploadVoice','downloadVoice','chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
				    success: function(res) {}
				});
				// 4.2 开始录音
				document.querySelector('#startRecord').onclick = function () {
		            $("#msg").html('录音中...');
		            wx.startRecord();
		        };

				// 4.3 停止录音
				document.querySelector('#stopRecord').onclick = function() {
					wx.stopRecord({
						success : function(res) {
							voice.localId = res.localId;
							$("#msg").html('录音已停止');
						},
						fail : function(res) {
							alert(JSON.stringify(res));
						}
					});
				};

				// 4.4 监听录音自动停止
				wx.onVoiceRecordEnd({
					complete : function(res) {
						voice.localId = res.localId;
						$("#msg").html('录音时间已超过一分钟');
					}
				});

				// 4.5 播放音频
				document.querySelector('#playVoice').onclick = function() {
					if (voice.localId == '') {
						$("#msg").html('请先使用 startRecord 接口录制一段声音');
						return;
					}
					wx.playVoice({
						localId : voice.localId
					});
				};
				
				// 4.8 上传语音
				document.querySelector('#uploadVoice').onclick = function() {
					if (voice.localId == '') {
						$("#msg").html('请先使用 startRecord 接口录制一段声音');
						return;
					}
					$("#msg").html('uploading...');
					$("input[name='audioUrl']").val(voice.localId);
					if(check()){
						wx.uploadVoice({
						    localId: voice.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
						    isShowProgressTips: 1, // 默认为1，显示进度提示
					        success: function (res) {
					        	voice.serverId = res.serverId; // 返回音频的服务器端ID
					        	$("#msg").html('上传语音成功，serverId 为' + res.serverId);
					    	}
						});
						document.forms[0].submit();
					}
				};

				// 4.6 暂停播放音频
				document.querySelector('#pauseVoice').onclick = function() {
					wx.pauseVoice({
						localId : voice.localId
					});
					$("#msg").html('暂停');
				};

				// 4.7 停止播放音频
				document.querySelector('#stopVoice').onclick = function() {
					wx.stopVoice({
						localId : voice.localId
					});
					$("#msg").html('停止');
				};

				// 4.8 监听录音播放停止
				wx.onVoicePlayEnd({
					complete : function(res) {
						$("#msg").html('录音（' + res.localId + '）播放结束');
					}
				});

				// 4.9 下载语音
				document.querySelector('#downloadVoice').onclick = function() {
					if (voice.serverId == '') {
						$("#msg").html('请先使用 uploadVoice 上传声音');
						return;
					}
					wx.downloadVoice({
						serverId : voice.serverId,
						success : function(res) {
							$("#msg").html('下载语音成功，localId 为' + res.localId);
							voice.localId = res.localId;
						}
					});
				};
				
				document.querySelector('#reset_btn').onclick = function() {
					voice.localId = "";
				};
			});
			wx.error(function(res) {

			});

			var $title = $("input[name='title']");
			var $price = $("input[name='price']");
			$("#del_title").on('click', function() {
				if ($.trim($title.val()) == '')
					return;
				else
					$title.val('');
			});
			$("#del_price").on('click', function() {
				if ($.trim($price.val()) == '')
					return;
				else
					$price.val('');
			});
			function check(){
				var $target = $("input[name='title']");
				if ($target.val() == '') {
					alert("标题不能为空！");
					return false;
				}
				;
				$target = $("input[name='price']");
				if ($target.val() == '' || isNaN($target.val())) {
					alert("价格不能为空，且必须数字哦！");
					return false;
				}
				return true;
			}
		});
	</script>
</body>
</html>